CSS濾鏡

• 能夠使用空白分隔，依序套用濾鏡函數序列。
• filter不只能夠用在影像圖片，任何HTML元素、SVG圖形都可以加上濾鏡。

一、基本濾鏡

• blur：
  使用高斯模糊元素內容。
  不允許負值
• opaction：
  支持0～1或0%～100%
  不允許負值
• drop-shadow：
  filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
  drop-shadow沒有內陰影效果
  不能如box-shadow直接陰影疊加，但可以連續宣告兩組drop-shadow濾鏡在filter上
  CSS3 filter:drop-shadow濾鏡與box-shadow區別應用

二、顏色濾鏡

• grayscale ([ number | percentage ])
  0不做改變，1或100%會產生完全灰階的元素。
• sepia ([ number | percentage ])
  將元素顏色朝深褐色掉調整（#704214 or rgba(112,66,20)）
• invert ([ number | percentage ])
  反轉顏色數值
• hue-rotate ([ ])
  沿著HSL色輪改變元素色調（hue），維持飽和度與亮度不變
  可以使用負值（逆時針方向）

三、亮度、對比與飽和度
　＊這類濾鏡允許大於1或100%的數值

• brightness ([ number | percentage ])
  改變元素顏色的亮度
• contrast([ number | percentage ])
  改變元素顏色的對比度
• saturate ([ number | percentage ])
  改變元素顏色的飽和度

四、SVG濾鏡
url( )數據類型，能指向以SVG定義的濾鏡